<template>
	<view class="box">
		<view class="bg">
			<image src="../../static/image/loginbg.png" />
		</view>
		<view class="login-box">
			<u--form labelPosition="left" :model="corporationsData" :rules="rules" ref="corporationsData"
				labelAlign="right" labelWidth="0">
				<u-form-item prop="mobile">
					<view style="background: #F3F5F6;border-radius: 12rpx;">
						<u-input placeholder="请输入手机号" v-model="corporationsData.mobile" :maxlength="11" />
					</view>
				</u-form-item>

				<u-form-item prop="password">
					<view style="background: #F3F5F6;border-radius: 12rpx;">
						<u-input placeholder="请输入密码" v-model="corporationsData.password" type="password" />
					</view>
				</u-form-item>
			</u--form>
			<view class="zhmm">
				<label @click="retrievePassword">找回密码</label>
			</view>
		</view>
		<view class="dl-button" @click="wxLogin">登录</view>
		<view class="zc-button" @click="enroll">注册</view>
	</view>
</template>

<script>
	import {
		login,
		getOpenid
	} from "@/api/api.js";
	export default {
		data() {
			return {
				openId: "",
				unionid: "",
				corporationsData: {
					mobile: "18574812093",
					password: "18574812093",
				},
				rules: {
					'mobile': {
						type: 'string',
						required: true,
						message: '手机号不能为空',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '密码不能为空',
						trigger: ['blur', 'change']
					},
				},
				goodsId: "", //商品ID
				inviterCode: "", //手机号
			};
		},
		onLoad(ope) {
			if (ope.goodsId) {
				this.goodsId = ope.goodsId
			}
			if (ope.inviterCode) {
				this.inviterCode = ope.inviterCode
			}
		},
		onShow() {
			if (uni.getStorageSync("token") && uni.getStorageSync("openId")) {
				uni.reLaunch({
					url: "/pages/home/home"
				})
			}
		},
		methods: {
			enroll() {
				this.$u.route({
					url: "/subpackageA/pages/my/enrollment/enrollment",
					params: {
						goodsId: this.goodsId,
						inviterCode: this.inviterCode
					}
				})
			},
			retrievePassword() {
				this.$u.route({
					url: "/subpackageA/pages/my/retrievePassword/retrievePassword",
				})
			},
			async submit() {
				let res = await login(this.corporationsData)
				if (res.code == 0) {
					uni.setStorageSync("token", res.data.token)
					uni.setStorageSync("userData", res.data)
					uni.$u.toast("登录成功")
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/home/home"
						})
					}, 1000);
				} else {
					uni.$u.toast(res.msg)

				}
			},
			async login(e) {
				let data = {
					unionId: e.unionId,
					miniOpenId: e.openid
				}
				await this.$request.get("/water-platform-app-api/customer/login/miniRegisterV1", data,
					"application/json").then(res => {
					if (res.code == 0) {
						console.log(res.data);
						uni.setStorageSync("user", res.data)
						uni.setStorageSync("token", res.data.token)
						uni.reLaunch({
							url: "/pages/home/home"
						})
					}
				})
			},
			async wxLogin() {
				this.$refs["corporationsData"].validate().then(res => {
					uni.getProvider({
						service: 'oauth',
						success: (res) => {
							if (~res.provider.indexOf('weixin')) { //支持微信、qq和微博等
								uni.login({
									provider: 'weixin',
									success: async (loginRes) => {
										console.log(loginRes, "获取code");
										let openId = await getOpenid({
											code: loginRes.code
										})
										console.log(openId.data,
											"获取openIdopenIdopenId");
										uni.setStorageSync("openId", openId.data)
										// this.login(openId)
										this.submit()
									},
									fail(res) {
										console.info(res)
										if (res.errMsg.includes('客户端未安装')) {
											uni.showToast({
												title: '请先安装微信客户端',
												duration: 2000,
												icon: "none"
											});
										} else if (res.errMsg.includes('用户取消')) {
											uni.showToast({
												title: '用户取消授权登录',
												duration: 2000,
												icon: "none"
											});
										} else if (res.errMsg.includes(
												'Authentication failed')) {
											uni.showToast({
												title: '用户拒绝授权登录',
												duration: 2000,
												icon: "none"
											});
										} else {
											uni.showToast({
												title: res.errMsg,
												duration: 2000,
												icon: "none"
											});
										}
									}
								});
							}
						},
						fail(res) {
							console.info(res)
						}
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss">
	.box {
		background-color: #fff;

		.bg {
			image {
				width: 100%;
				height: 532rpx;
			}
		}

		.login-box {
			padding: 0 94rpx;
			box-sizing: border-box;
			margin-top: 128rpx;
			margin-bottom: 64rpx;

			.zhmm {
				text-align: end;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #14171A;
				line-height: 33rpx;
			}
		}

		.dl-button {
			margin: 0 94rpx;
			background: #2590FA;
			border-radius: 100rpx;
			color: #fff;
			padding: 22rpx 0;
			box-sizing: border-box;
			text-align: center;
			margin-bottom: 32rpx;
		}

		.zc-button {
			margin: 0 94rpx;
			border: 1px solid #2590FA;
			color: #2590FA;
			border-radius: 100rpx;
			padding: 22rpx 0;
			box-sizing: border-box;
			text-align: center;
		}

		//=======
		.image-text {
			text-align: center;
			margin-top: 244rpx;

			.image {
				width: 240rpx;
				height: 240rpx;
				border-radius: 50%;
			}

			.text {
				font-size: 32rpx;
				color: #14171A;
				font-weight: 700;
				margin-top: 36rpx;
			}
		}

		.login {
			width: 548rpx;
			height: 92rpx;
			background: #2590FA;
			border-radius: 100rpx 100rpx 100rpx 100rpx;
			margin: 0 auto;
			text-align: center;
			color: #FFF;
			line-height: 92rpx;
			font-size: 28rpx;
			margin-top: 64rpx;
		}
	}
</style>